<template>
  <view>
    <view class="navbar">
      <view class="title">待办</view>
    </view>
    <view v-if="hasNoPermission" class="auth_mess">暂无权限</view>
    <view class="content" v-else>
      <!-- <u-subsection :list="titlelist" mode="subsection" :current="curTabs" activeColor="#D22C2C"
        @change="tabsFun"></u-subsection> -->
      <view class="list-info">
        <view class="nyj-list-item" v-for="(item, index) in list" :key="index">
          <view class="nyj-list-status">{{
            item.status == 0 ? "审批中" : "已完成"
            }}</view>
          <view class="nyj-list-title">{{ item.instanceName }}</view>
          <view class="nyj-list-btns">
            <u-button type="primary" size="small" text="审核" @click="goApply(item.instanceId)"></u-button>
          </view>
        </view>
        <u-loadmore :status="status" style="padding-top:10rpx" loadmoreText="上拉加载更多" />
        <!-- <uni-load-more :status="status" v-if="!emptyShow" /> -->
        <!-- <u-empty
          text="暂无数据"
          :mode="mode"
          :show="emptyShow"
          margin-top="200"
        ></u-empty> -->
      </view>
    </view>
    <u-action-sheet :show="showSex" :actions="actions" title="请选择处理方式" @close="showSex = false"
      @select="processingSelect">
    </u-action-sheet>
    <u-back-top :scroll-top="scrollTop" :top="top" mode="square" :iconStyle="iconStyle"></u-back-top>
  </view>
</template>

<script>
  import { currentUserTable, updateExceptionHandling } from "@/api/cockpit/cockpit";
  import update from "@/components/update/index";
  import constant from '@/utils/constant';
  import storage from '@/utils/storage';
  import {
    getMennus
  } from "@/api/home";
  export default {
    props: {
      scrollHeight: {
        type: String,
        default: "100%",
      },
    },
    components: { update },
    data() {
      return {
        // 分页参数
        showSex: false,
        actions: [
          {
            name: "已处理",
            value: 0,
          },
          {
            name: "无需处理",
            value: 1,
          },
          {
            name: "误报",
            value: 2,
          },
        ],
        hasNoPermission: false,
        titlelist: ["全部", "审批中", "已完成"],
        curTabs: 0,
        pageNum: 1,
        pageSize: 15,
        // 加载更多组件参数
        status: "loadmore",
        iconType: "flower",
        bgColor: "#f2f2f2",
        // 数据为空提示组件参数
        emptyShow: false,
        mode: "list",
        // 返回顶部组件参数
        scrollTop: 0,
        top: "600",
        iconStyle: {
          fontSize: "32rpx",
          color: "#2979ff",
        },
        list: [],
        chartData: {},
        //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        chartOptsOne: {
          color: ["#536fc8", "#95ca74"],
          padding: undefined,
          title: {
            name: "",
          },
          subtitle: {
            name: " ",
          },
          extra: {
            arcbar: {
              type: "circle",
              width: 12,
              backgroundColor: "#f8f8f8",
              startAngle: 1.5,
              endAngle: 1,
              gap: 2,
            },
          },
        },
        chartOptsTwo: {
          color: ["#536fc8", "#f5c756"],
          padding: undefined,
          title: {
            name: "",
          },
          subtitle: {
            name: " ",
          },
          extra: {
            arcbar: {
              type: "circle",
              width: 12,
              backgroundColor: "#f5f5f5",
              startAngle: 1.5,
              endAngle: 1,
              gap: 2,
            },
          },
        },
      };
    },
    onReachBottom() {
      if (this.status == "nomore") return;
      this.getList();
    },
    onPullDownRefresh() {
      this.initPage();
      this.getList();
      uni.stopPullDownRefresh();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
      uni.hideLoading()
    },
    onLoad() {
      this.initPage();
      this.getList();
    },
    onShow() {
      this.scrollTop = 0;
      const userInfo = storage.get(constant.SYS_CONSIGNOR)
      if (userInfo.sysUser?.userId != 1) {
        this.getMenus()
      }
    },
    created() {
    },
    methods: {
      goApply(instanceId) {
        this.$tab.navigateTo("/pages/need/apply?instanceId=" + instanceId);
      },
      async processingSelect(e) {
        let res = await updateExceptionHandling({
          ids: [this.infoObj.id],
          processingStatus: e.value,
        });
        if (res.code == 200) {
          this.$modal.msgSuccess("处理成功");
          setTimeout(() => {
            // 返回之前页面
            this.showSex = false;
          }, 1000);
        }
      },
      async getMenus() {
        let res = await getMennus()
        if (res.code == 200) {
          this.hasNoPermission = res.permissions.includes('app:system:need') ? false : true
        }
      },
      tabsFun(e) {
        this.curTabs = e;
      },
      goDetail(item) {
        let tableName = item.tableName;
        let url = "";

        if (tableName === "transale_plan_month_apply") {
          //企业端月计划(超额计划) OK
          url =
            "/pages/need/transalePlanMonthApplyDetail?id=" +
            item.tableId +
            "&instanceId=" +
            item.instanceId;
        } else if (tableName === "transale_plan") {
          //月运销计划审批
          url =
            "/pages/need/transalePlan?id=" +
            item.id +
            "&instanceId=" +
            item.instanceId;
        } else if (tableName === "transale_plan_adjust") {
          //月计划调整审批
          url =
            "/pages/need/transalePlanAdjustDetail?id=" +
            item.id +
            "&instanceId=" +
            item.instanceId;
        } else if (tableName === "client_corp_back") {
          //企业黑名单审批 OK
          url =
            "/pages/need/clientCorpBackDetail?id=" +
            item.tableId +
            "&instanceId=" +
            item.instanceId;
        } else if (tableName === "client_corp") {
          //企业资料审批 OK
          url =
            "/pages/need/enterpriseDetail?id=" +
            item.tableId +
            "&instanceId=" +
            item.instanceId;
        } else if (tableName === "truck_car_black_audit") {
          //车辆黑名单审批 ok
          url =
            "/pages/need/truckCarBlackAuditDetail?id=" +
            item.tableId +
            "&instanceId=" +
            item.instanceId;
        } else if (tableName === "system_customer") {
          //废煤企业
          url =
            "/pages/need/aptitudeEnterpriseDetail?id=" +
            item.tableId +
            "&instanceId=" +
            item.instanceId;
        }
        this.$tab.navigateTo(url);
      },
      initPage() {
        this.list = [];
        this.pageNum = 1;
        this.emptyShow = false;
        this.scrollTop = 0;
      },
      async getList() {
        try {
          let options = {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          };
          this.status = "loading";
          let res = await currentUserTable(options);

          let rows = res.data.data.rows;
          this.list = this.list.concat(rows);
          this.emptyShow = this.list.length <= 0;
          this.status = rows.length < this.pageSize ? "nomore" : "loadmore";
          if (this.status == "loadmore") {
            this.pageNum += 1;
          }
        } catch (e) {
          console.log(e);
        }
      },

      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            series: [
              {
                name: "一班",
                data: 0.8,
              },
              {
                name: "二班",
                data: 0.6,
              },
            ],
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500);
      },
      //扫一扫
      goScan() {
        this.$tab.navigateTo(`./scan`);
      },
      async getCompanySaleList() {
        try {
          const res = await getCompanySale({});
          let data = res.data;
          let option = {
            categories: data.name,
            series: [
              {
                name: "销量",
                data: data.data,
              },
            ],
          };
          this.companySaleList = JSON.parse(JSON.stringify(option));

          //   let optionPrice = {
          //       categories: data.name,
          //       series: [
          //           {
          //               name: "销售额",
          //               data: data.sale,
          //           },
          //       ],
          //   };
          //   this.companyPriceList = JSON.parse(JSON.stringify(optionPrice));
        } catch (e) {
          console.log(e);
        }
      },
      async getSalesVolumeList() {
        try {
          const res = await getSalesVolume({});
          let data = res.data;
          let optionPrice = {
            categories: data.name,
            series: [
              {
                name: "销售额",
                data: data.data,
              },
            ],
          };
          this.companyPriceList = JSON.parse(JSON.stringify(optionPrice));
        } catch (e) {
          console.log(e);
        }
      },
      //企业产销趋势
      async getSaleProdTrendList() {
        try {
          const res = await getSaleProdTrend({});
          let data = res.data;
          let option = {
            categories: data.name,
            series: [
              {
                color: "#4ECDB6",
                data: data.prod,
                name: "产量",
                style: "curve",
                type: "line",
              },
              {
                color: "#ff6900",
                data: data.sale,
                name: "销量",
                style: "curve",
                type: "line",
              },
            ],
          };
          this.saleProdTrendList = JSON.parse(JSON.stringify(option));
        } catch (e) {
          console.log(e);
        }
      },
      //煤炭种类产量占比
      async getTypeCoalOutputList() {
        try {
          const res = await getTypeCoalOutput({});
          let data = res.data;
          let dataList = [];
          let colorList = ["#4DCCB3", "#5A77EC", "#4E94EC", "#4FD4EB", "#B5ED21"];
          data.forEach((item, index) => {
            dataList.push({
              color: colorList[index],
              name: item.name,
              value: item.value,
            });
          });

          let series = {
            series: [
              {
                data: dataList,
                format: "pieDemo",
              },
            ],
          };
          console.log(series);
          this.typeCoalOutputList = JSON.parse(JSON.stringify(series));
          // this.typeCoalOutputList.series = series;
        } catch (e) {
          console.log(e);
        }
      },
      //煤炭种类销量占比
      async getTypeCoalSaleList() {
        try {
          const res = await getTypeCoalSale({});
          let data = res.data;
          let dataList = [];
          let colorList = ["#4DCCB3", "#5A77EC", "#4E94EC", "#4FD4EB", "#B5ED21"];
          data.forEach((item, index) => {
            dataList.push({
              color: colorList[index],
              name: item.name,
              value: item.value,
            });
          });

          let series = {
            series: [
              {
                data: dataList,
                format: "pieDemo",
              },
            ],
          };
          console.log(series);
          this.typeCoalSaleList = JSON.parse(JSON.stringify(series));
        } catch (e) {
          console.log(e);
        }
      },
      //采购类型占比
      async getTypeoutputPurchaseList() {
        try {
          const res = await getTypeoutputPurchase({});
          let purchaseInData = res.data.PurchaseIn;
          let colors = ["#FFBF31", "#3CEFC4"];
          purchaseInData.forEach((item, index) => {
            item.color = colors[index];
          });

          let series = {
            series: [
              {
                data: purchaseInData,
              },
            ],
          };

          let salePurchaseInData = res.data.PurchaseOut;
          let saleColors = ["#FFA9B3", "#3CBBFF"];
          salePurchaseInData.forEach((item, index) => {
            item.color = saleColors[index];
          });

          let saleSeries = {
            series: [
              {
                data: salePurchaseInData,
              },
            ],
          };
          this.typeoutputPurchaseList = series;
          this.typeoutputSaleList = saleSeries;
        } catch (e) {
          console.log(e);
        }
      },
    },
  };
</script>

<style scoped lang="less">
  .nyj-list-btns {
    height: 60rpx;
    border-top: 2rpx solid #F1F1F1;
    padding-top: 16rpx;
    margin: 16rpx 0;

    .u-button {
      width: 120rpx;
      border-radius: 42rpx;
      float: right;
      height: 56rpx;
    }
  }

  .nyj-list-title {
    font-size: 32rpx;
    color: #000;
    font-weight: 500;
    font-family: PingFang SC, PingFang SC-500;
  }

  .nyj-list-status {
    font-size: 30rpx;
    color: #D22C2C;
    font-family: PingFang SC, PingFang SC-600;
  }

  .content {
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 128rpx 20rpx 20rpx 20rpx;

    .list-info {
      .u-cell {
        margin: 10rpx 0 0 0;
        border-radius: 5rpx;
        background-color: #fff;

        .u-cell__body {
          background-color: #fff;
        }
      }
    }

    .title-box {
      color: #ffffff;
      text-align: center;
      padding-top: 100rpx;
      margin-bottom: 80rpx;

      .title-name {
        font-size: 36rpx;
      }

      .unit {
        font-size: 28rpx;
        font-weight: 400;
      }
    }

    .chart-content {
      margin-top: 32rpx;

      .chart-box {
        width: 450rpx;
        height: 450rpx;
        margin: 32rpx auto;
        position: relative;

        .chart-title {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;

          .center-label {
            .title {
              font-size: 35rpx;
              color: #666666;
              margin-bottom: 10rpx;
            }

            .value-1 {
              display: initial;
              padding: 0 50rpx;
              margin-top: 10rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #536fc8;
              font-size: 40rpx;
              color: #536fc8;
            }

            .value-2 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #95ca74;
              font-size: 40rpx;
              color: #95ca74;
            }
          }

          .top-20 {
            margin-top: 40rpx;
          }
        }
      }
    }

    .list-info {
      /deep/.title .u-cell__title-text {
        font-size: 30rpx !important;
        font-weight: 400 !important;
        color: #999999 !important;
      }

      /deep/.u-line {
        /* background: #FFFFFF;
        border-bottom: #FFFFFF;
        border-top-color: #FFFFFF;
        border-right-color: #FFFFFF;
        border-left-color: #FFFFFF; */
      }

      /deep/.u-cell-group__wrapper>.u-line:first-child {
        border: none !important;
      }

      /deep/.title .u-line {
        border: none !important;
      }
    }
  }
</style>